<template>
	<view class="home_page_box">
		<!-- 顶部 -->
		<view class="home_top_box">
			<view class="status_bar"></view>
			<view class="box_fel">
				<view class="box_fel_l">
					<image :src="Data2.avatar" mode="" class="head_img"></image>
				</view>
				<view class="box_fel_c">
					<view class="fel_center_t">
						Hi，{{Data2.truename}}
					</view>
					<view class="fel_center_b">
						欢迎来到农担信息采集系统
					</view>
				</view>
				<view class="box_fel_r">
					<view class="fel_r_btn">
						关注公众号
					</view>
				</view>
			</view>
		</view>
		<!-- 中间 -->
		<view class="home_cen_box">
			<view class="home_cen_l">
				<!-- 未完成登记start -->
				<view class="cen_t" @click="gonoagricultural">
					<view class="cen_t_l">
						<image src="../../static/img/registering.png" mode="" class="left_t_img"></image>

						<view class="left_b">
							未完成登记
						</view>

						<view class="rounded" v-if="sum!=0">
							{{sum}}条
						</view>
					</view>
					<view class="right_img_box">
						<image src="../../static/img/registering.png" mode="" class="left_r_img"></image>
					</view>
				</view>
				<!-- 未完成登记end -->
				<!-- 帮助中心start -->
				<view class="cen_t" @click="gohelpCenter">
					<view class="cen_t_l">
						<image src="../../static/img/help-fill.png" mode="" class="left_t_img"></image>
						<view class="left_b">
							帮助中心
						</view>
					</view>
					<view class="right_img_box">
						<image src="../../static/img/help-fill.png" mode="" class="right_r_img"></image>
					</view>
				</view>
				<!-- 帮助中心end -->
			</view>
			<!-- 关于我们 -->
			<view class="home_cen_r" @click="goAboutUs">
				<view class="cen_r_t">
					<image src="../../static/img/person.png" mode="" class="cen_t_img"></image>
					<view class="cen_text">
						关于我们
					</view>
				</view>
				<view class="cen_r_b">
					<image src="../../static/img/person.png" mode="" class="cen_b_img"></image>
				</view>
			</view>

		</view>
		<!-- 底部 -->
		<view class="home_bot_box">
			<view class="bot_box_t">
				<view class="bot_t_l"></view>
				<view class="bot_t_r">
					合作银行
				</view>
			</view>
			<view class="bot_box_b">
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/pufayinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						浦发银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhongguonongyeyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						农业银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhongguojiansheyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						建设银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhongguoyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						中国银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhongguominshengyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						民生银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/jiaotongyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						交通银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/qingdaoyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						青岛银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhaoshangyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						招商银行
					</view>
				</view>
				<view class="box_ban">
					<view class="ban_img">
						<img src="@/static/img/zhongxinyinhang.png" style="width: 100%; height: 100%;">
					</view>
					<view class="ban_text">
						中信银行
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		inquire,
	} from "@/static/js/api/noagricultural.js"
	import {
		pageCenter
	} from "../../static/js/api/my.js"
	import {
		get
	} from "@/static/js/uilt/index.js"

	export default {
		data() {
			return {
				user: "",
				sum: 0,
				Data: '',
				Data1: '',
				Data2: ''
			}
		},
		onShow() {
			this.beg()
			this.beg1()
		},
		methods: {
			async beg1() {
				this.Data1 = await pageCenter()
				this.Data2 = this.Data1.data.nongdanFillingUserPo
			},
			async beg() {
				this.Data = await inquire()
				this.sum = this.Data.data.total
			},
			gonoagricultural() {
				uni.navigateTo({
					url: '/pages/noagricultural/noagricultural'
				})
			},
			goAboutUs() {
				uni.navigateTo({
					url: '/pages/AboutUs/AboutUs'
				})
			},
			gohelpCenter() {
				uni.navigateTo({
					url: '/pages/helpCenter/helpCenter'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home_page_box {
		overflow: hidden;
		background-color: #EEEEEE;
	}

	.home_top_box {
		width: 750rpx;
		height: 300rpx;
		position: relative;
	}

	.status_bar {
		width: 750rpx;
		height: 200rpx;
		background: linear-gradient(0deg, #1478FF 0%, #3BBCDC 100%);
		border-radius: 0 0 50rpx 50rpx;
		display: flex;
		justify-content: center;
	}

	.box_fel {
		width: 710rpx;
		height: 180rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		display: flex;
		position: absolute;
		left: 20rpx;
		bottom: 30rpx;

		.box_fel_l {
			width: 150rpx;
			height: 180rpx;

			.head_img {
				width: 100rpx;
				height: 100rpx;
				background: #E7F1FD;
				border-radius: 50%;
				margin-top: 40rpx;
				margin-left: 21rpx;
			}
		}

		.box_fel_c {
			width: 419rpx;
			height: 180rpx;

			.fel_center_t {
				height: 31rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
				margin-top: 52rpx;
				margin-bottom: 29rpx;
			}

			.fel_center_b {
				height: 27rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.box_fel_r {
			width: 170rpx;
			height: 180rpx;

			.fel_r_btn {
				width: 150rpx;
				height: 60rpx;
				background: linear-gradient(-56deg, #1478FF 0%, #3BBCDC 100%);
				border-radius: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;

				margin-top: 60rpx;
			}
		}
	}

	.home_cen_box {
		width: 750rpx;
		height: 310rpx;
		display: flex;
		padding: 0 20rpx;

		.home_cen_l {
			width: 345rpx;
			height: 290rpx;
			margin-right: 20rpx;

			.cen_t {
				width: 345rpx;
				height: 135rpx;
				background: #FFFFFF;
				box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				position: relative;

				.cen_t_l {
					width: 179rpx;
					height: 135rpx;

				}

				.right_img_box {
					border-radius: 0 20rpx 20rpx 0;
					overflow: hidden;
				}

				.left_t_img {
					width: 44rpx;
					height: 46rpx;
					margin-top: 24rpx;
					margin-left: 20rpx;

				}

				.left_b {
					height: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 20rpx;
				}

				.rounded {
					position: absolute;
					top: -10rpx;
					right: -10rpx;

					width: 77rpx;
					height: 32rpx;
					background: #C82C38;
					border-radius: 16rpx;

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;

					line-height: 32rpx;
					text-align: center;

				}

				.left_r_img {
					width: 166rpx;
					height: 135rpx;
					opacity: 0.1;
					transform: scale(1.18);
				}

				.right_r_img {
					width: 166rpx;
					height: 135rpx;
					opacity: 0.1;
					margin-left: 30rpx;
					transform: scaleX(1.25) scaleY(1.4);
				}
			}
		}

		.home_cen_r {
			width: 345rpx;
			height: 290rpx;
			box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.cen_r_t {
				width: 345rpx;
				height: 110rpx;
				margin-left: 20rpx;
			}

			.cen_t_img {
				width: 73rpx;
				height: 44rpx;
				transform: scaleY(1.5);
				margin-top: 24rpx;
			}

			.cen_r_b {
				margin-left: 20rpx;
			}

			.cen_b_img {
				overflow: hidden;
				width: 316rpx;
				height: 192rpx;
				margin-left: 30rpx;
				transform: scaleX(1.15) scaleY(1.8);
				opacity: 0.1;
			}

		}
	}

	.home_bot_box {
		height: 550rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		margin: 0 20rpx;
		margin-bottom: 100rpx;

		.bot_box_t {
			padding: 0 20rpx;
			height: 67rpx;
			display: flex;

			.bot_t_l {
				width: 6rpx;
				height: 28rpx;
				background: #1478FF;
				border-radius: 3rpx;
				margin-top: 20rpx;
			}

			.bot_t_r {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
				margin-left: 8rpx;
				margin-top: 17rpx;
			}
		}

		.bot_box_b {
			padding: 0 20rpx;
			height: 483rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			.box_ban {
				width: 210rpx;
				height: 136rpx;
				margin-bottom: 20rpx;

				// margin-right: 20rpx;
				.ban_img {
					width: 210rpx;
					height: 90rpx;
					background: #FFFFFF;
					border: 1px solid #EEEEEE;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}

				.ban_text {
					height: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					text-align: center;
				}
			}
		}
	}
</style>